<template>
  <div id="app">
    <router-link to="/home">主页</router-link>
    |
    <router-link to="/discover">发现</router-link>
    |
    <router-link to="/friend">风云人物</router-link>
    |
    <router-link to="/goods">商品</router-link>
    |
    <router-link to="/count">计数器</router-link>
    |
    <router-link to="/gouwuche">购物车</router-link>
    |
    <router-link to="/axios">Axios</router-link>
    |
    <!-- 注册个点击事件 -->
    <button @click="jump">按钮</button>

    <!-- //展示视图 -->
    <router-view></router-view>
  </div>
</template>


<script>
export default {
  methods: {
    jump() {
      //编程式导航  使用js逻辑来控制路由的跳转 而不是使用router-link组件跳转

      //push  向浏览器历史记录栈中压入一个记录 (经常用)
      //直接对象
      // this.$router.push({ path: '/discover' })
      //传入路径
      // this.$router.push('discover')
      //传入具名路由跳转
      // this.$router.push({name:'dj'})
      //   参数的传递  query params
      // 参数
      // this.$router.push({path:'/home',query:{song:'轩辕剑'}})
      //params 传参 path 换成name   直接传递params的时候需要使用name来进行跳转  不然传递是不成功的
      this.$router.push({ name: "home", params: { song: "轩辕剑" } });

      //replace   替换掉上个历史记录栈中
      //和push的用法一样 区别就是 会替换掉上一个历史记录 访问不会产生历史记录

      //go (number)  去到几个历史记录

      //forward  前进 相当于点击了浏览器的前进按钮

      //back  退后 相当于点击了浏览器的后退按钮
    },
  },
};

//单页应用 SPA 一个项目只有一个html页面 所有的页面跳转依据于路由进行

//优点  用户体检好 切换速度快 不需要刷新整个页面

//缺点  不利于seo解决 服务器渲染 首页加载速度可能会比较慢

// 配置路由的步骤
// 1. 构建视图组件(怕符)
// 2. 配置router  一个path映射一个component
// 3. router-view 配置视口

//$router  $route 区别

//$router是实例出来的最大的路由对象 $router和$route是包含关系 $router包含了$route

//$route 是当前页面的路由对象

//匹配优先级
//同一个路径可以区配多个路径 优先级  按照自定义的顺序 谁先定义就先匹配谁

//具名路由
//给路由加名字
//找到父组件 :to{name:'xxx'} //里面以对象的形式写出来 以路经形式写：:to{path:'/xxx/xxx'}

// laser

// 2

//参数的传递  query params  这两种传参有什么区别？

//   query 刷新页面不会丢失    params刷新页面会丢失
//params 传参 path 换成name   直接传递params的时候需要使用name来进行跳转  不然传递是不成功的

//路由模式
//hash 模式路由
//获取hash location.hash  拿到hash值

//监听hash 改变的方法 onhashchange   渲染页面

//history模式
// 主要的核心 就是利用了h5新增的history api
//通过popstate 事件处理对应的数据
//正常调用pushState也不会建立起http连接  发起请求 到时一旦刷新页面就会造成404的问题

// ## hash history abstract模式的不同点(背):

// 1. hash有#号,#号后面的url不会向后端发起请求

// 2. hash路由使用onhashchange监听       history使用onpopstate监听

// 3. history使用的是H5的api pushState replaceState
// 4. 当hash值相同时,不会触发hashchange,history当输入相同的路径的时候,会将浏览器中的地址当成是请求地址向后台发送请求,会造成页面404
// 5. abstract模式是在没有浏览器api的情况下自动启用,abstract模式在切换页面的时候,路径是不会发生变化的

// 6. 关键字 onhashchange pushstate replacestate popstate
// 7. 如果后端不配合 不要使用history模式

//vuex 一共六个属性

//状态
//如何使用vuex定义的state

// 1 使用$store直接获取
//2. 辅助函数mapState  (规律 结果就放在计算属性中去  函数放在mounted中区)
//语法  ...mapState(['num',"user"] )
//   state: {},

//用于变更状态
//   getters: {},

//用于异步操作
//   mutations: {},

//数据预处理(相当于vuex的计算属性)
//   actions: {},

//模块化
//   modules: {},

//为甚么mutations只能同步操作
//这个是vuex的设计规则  调试工具只能监听到mutations中的变更
// vuex~设计者希望我们把异步的操作分离  而不是将逻辑写在一块 导致难以维护

//vuex里面如果有些数据存到里面容易丢失怎么办？

//可以存到本地储存数据里面  我们在公司一般用插件 vuex-persistedstate



// 解决跨域的方法  代理配置  不会丢失 sessionStorage
 //配置开发服务  代理
  // devServer:{
  //   port:3030,//项目的端口
  //   proxy:{//代理
  //     "/api":{
  //       target:"http://chst.vip",
  //       //路径重写
  //       pathRewrite:{
  //         "^/api":""
  //       }
  //     }
  //   }
  // }
  // 把地址修改'/api/data/index.json'

//1 请求发起时 地址是 /api/data/index.json
//2 经过代理之后会变成 http://chst.vip/api/data/index.json
//3 路径重写后 http://chst.vip/data/index.json




</script>



<!-- <template>
    <div id="app">
        <router-link to="/home" id="home">主页</router-link>
        |
        <router-link to="/friend" id="friend">人物</router-link>
        |
        <router-link to="/discover">商品</router-link>

        <router-view></router-view>
        
        
    </div>
</template>
<style>

#app{
    margin-top: 50px;
    color: aqua;
    text-align: center;
    padding-left: 20px;

}
#home{
    color: aqua;
}

</style> -->